<template>
    <div class="rx-selectinput" @click.stop>
        <div class="rx-selectinput-select">
            <div class="rx-selectinput-choice" @click="selects" :class="{'is-active':!isSelectOn,'is-active-on':isActive}">
                <div class="rx-selectinput-sino">
                    <input type="text" :value="selectInfo" :placeholder="lists[0].name" readonly> 
                </div>              
                <div class="rx-selectinput-icon" :class="{'is-rotate':isSelectOn}">
                    <i class="iconfont icon-xiala"></i>
                 </div>              
            </div>    
            <div class="rx-selectinput-option" :class="{'is-select-on':isSelectOn}">
                <ul>
                    <li v-for="(item, index) in lists" :key="index" @click="select(item.name)">{{item.name}}</li>
                </ul>
            </div>
        </div>
        <div class="rx-selectinput-input" :class="{'is-active':isActive}">
            <input type="text" 
            @change="issueInfo" 
            v-model="inputVal" 
            @focus="changeInfo" 
            @blur="changeInfo" 
            placeholder="请输入姓名">
        </div>
    </div>
</template>
<script>
export default {
  name: "selectinput",
  props: {
    lists: {
      type: Array,
      default: []
    }
  },
  data() {
    return {
      selectInfo: "",
      inputVal: "",
      isSelectOn: true,
      isActive: false
    };
  },
  methods: {
    select(item) {
      this.selectInfo = item;
      this.isSelectOn = !this.isSelectOn;
      if (this.inputVal.length !== 0) {
        this.$emit("change", [
          this.selectInfo.length === 0 ? this.lists[0].name : this.selectInfo,
          this.inputVal
        ]);
      }
    },
    selects() {
      this.isSelectOn = !this.isSelectOn;
    },
    issueInfo() {
      this.$emit("change", [
        this.selectInfo.length === 0 ? this.lists[0].name : this.selectInfo,
        this.inputVal
      ]);
    },
    changeInfo() {
      this.isActive = !this.isActive;
    }
  },
  watch: {
    isSelectOn: function(newd, oldd) {
      var _this = this;
      if (newd == false) {
        document.body.onclick = function() {
          _this.isSelectOn = true;
        };
      }
    }
  }
};
</script>
<style lang="scss">
.rx-selectinput {
  display: inline-block;
  .rx-selectinput-select {
    width: 80px;
    position: relative;
    display: inline-block;
    height: 32px;
    user-select: none;
    .rx-selectinput-choice {
      width: 100%;
      height: 100%;
      background: rgba(255, 255, 255, 1);
      border-radius: 4px 0px 0px 4px;
      border: 1px solid #c1c4d6;
      overflow: hidden;
      &.is-active {
        border: 1px solid rgba(208, 212, 255, 1);
      }
      &.is-active-on {
        border-right: 1px solid rgba(208, 212, 255, 1);
      }
      .rx-selectinput-sino {
        width: 100%;
        height: 100%;
        input {
          width: 100%;
          height: 100%;
          text-indent: 12px;
          border: none;
          border-radius: 4px 0px 0px 4px;
          outline: none;
          color: black;
        }
      }
      .rx-selectinput-icon {
        position: absolute;
        top: 50%;
        transition: all 0.3s;
        transform: translateY(-50%) rotateZ(-180deg);
        right: 10px;
        &.is-rotate {
          transition: all 0.3s;
          transform: translateY(-50%) rotateZ(0deg);
        }
        .iconfont {
          font-size: 12px;
          color: #c0c4cc;
        }
      }
    }
    .rx-selectinput-option {
      &.is-select-on {
        display: none;
      }
      position: absolute;
      width: 100%;
      z-index: 999;
      ul {
        list-style: none;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
        border-radius: 8px;
        overflow: hidden;
        border: 1px solid rgba(222, 228, 238, 1);
        li {
          height: 33px;
          line-height: 33px;
          text-indent: 12px;
          background-color: #ffffff;
          &:hover {
            background: rgba(228, 239, 255, 1);
            color: #6575f6;
          }
        }
      }
    }
  }
  .rx-selectinput-input {
    display: inline-block;
    width: 120px;
    height: 32px;
    vertical-align: top;
    overflow: hidden;
    background: rgba(255, 255, 255, 1);
    border-radius: 0px 4px 4px 0px;
    border: 1px solid rgba(193, 196, 214, 1);
    border-left: none;
    &.is-active {
      border: 1px solid rgba(208, 212, 255, 1);
      border-left: none;
    }
    input {
      width: 100%;
      height: 100%;
      text-indent: 10px;
      border: none;
      border-radius: 0px 4px 4px 0px;
      outline: none;
    }
  }
}
</style>
